<template>
  <el-dialog class="dialogT" width="500" :model-value="dialogVisible" :title="dialogDatas.title"
    :destroy-on-close="true" @close="closeDialog">
    <div>
      <el-form ref="ruleFormRef" :model="ruleForm" label-width="100px" class="demo-ruleForm"
        :disabled="dialogDatas?.type == 'check'" :validate-on-rule-change="false">
        <!-- <el-form-item label="检测点ID" prop="id" v-if="dialogDatas.title=='新增' ? 1 :false">
          <el-input v-model="ruleForm.id" placeholder="请输入检测点ID" clearable maxlength="10" />
        </el-form-item> -->
        <el-form-item label="预约状态" prop="mobile">
          <el-text class="mx-1">{{ruleForm.status===1 ?' 预约成功': ruleForm.status===2?'预约取消':'预约待确认'}}</el-text>
        </el-form-item>
        <el-form-item label="手机号" prop="mobile">
          <el-text class="mx-1">{{ruleForm.mobile}}</el-text>
        </el-form-item>
        <el-form-item label="姓名" prop="name">
          <el-text class="mx-1">{{ruleForm.name}}</el-text>
        </el-form-item>

        <el-form-item label="年龄" prop="age">
          <el-text class="mx-1">{{ruleForm.age}}</el-text>
        </el-form-item>

        <el-form-item label="性别" prop="genderName">
          <el-text class="mx-1">{{ruleForm.genderName}}</el-text>
        </el-form-item>
        <el-form-item label="预约机构" prop="orgId">
          <el-text class="mx-1">{{ruleForm.orgName}}</el-text>
        </el-form-item>
        <el-form-item label="预约检测点" prop="checkPointId">
          <el-text class="mx-1">{{ruleForm.checkPointName}}</el-text>
        </el-form-item>
        <el-form-item label="预约时间" prop="reserveTime">
          <el-text class="mx-1">{{ruleForm.reserveTime.slice(0,-3)}}</el-text>
        </el-form-item>
        <el-form-item label="检测方式" prop="checkType">
          <el-text class="mx-1">{{ruleForm.checkTypeName}}</el-text>
        </el-form-item>
        <el-form-item label="检测点地址" v-show="ruleForm.checkType == '1'">
          <el-text class="mx-1">{{ruleForm.address}}</el-text>
        </el-form-item>
        <el-form-item label="上门顾问" v-show="ruleForm.checkType == '2'" prop="healthId">
          <el-text class="mx-1">{{ruleForm.healthName}}</el-text>
        </el-form-item>
        <el-form-item label="上门地址" v-show="ruleForm.checkType == '2'" prop="address">
          <el-text class="mx-1">{{ruleForm.address}}</el-text>
        </el-form-item>
        <el-form-item v-if="ruleForm.cancelReason && ruleForm.status == 2"  label="取消预约原因" >
          <el-text class="mx-1">{{ruleForm.cancelReason}} <span v-if="ruleForm.cancelRemark">（{{ ruleForm.cancelRemark }}）</span> </el-text>
        </el-form-item>
        <el-form-item label="备注" prop="remark" v-else>
          <el-text class="mx-1">{{ruleForm.remark}}</el-text>
        </el-form-item>
      </el-form>
    </div>
      <template #footer>
        <span class="dialog-footer" style="display: block;text-align: center;">
          <el-button @click="closeDialog">关闭</el-button>
        </span>
      </template>
  </el-dialog>
</template>
<script lang="ts" setup>
import {ref, reactive, onBeforeMount, toRefs } from 'vue';
import type { FormInstance} from 'element-plus';
const emit = defineEmits(['updateList', 'changeCheck', 'update:dialogVisible', 'handleFormValue']);
const props = defineProps({
  dialogVisible: {
    type: Boolean,
    default: false
  },
  dialogDatas: {
    type: Object,
    default: () => { }
  }
});
const { dialogVisible, dialogDatas } = toRefs(props);
const ruleFormRef = ref<FormInstance>()
let ruleForm = reactive({
  status:0,
  reserveId: null,
  name: null,
  orgId: '',
  reserveTime: "",
  checkType: '',
  healthId: '',
  address: "",
  healthName:'',
  orgName:'',
  remark: "",
  mobile: "",
  checkPointId: '',
  age: '',
  genderName: '',
  checkPointAddress:'',
  checkTypeName:'',
  checkPointName:'',
  cancelReason:'',
  cancelRemark:'',

})

// 关闭
const closeDialog = () => {
  emit('updateList')
}
onBeforeMount(async () => {

  if (dialogDatas.value.type == 'add') {
  } else {
    ruleForm = Object.assign(ruleForm, dialogDatas.value.datas)
  }
})
</script>

<style lang="scss" scoped>
.celanerTime {
  height: 32px;
  cursor: pointer;
  border: 1px solid #dcdfe6;
  border-radius: 3px;
  text-indent: 10px
}

.disableType {
  color: #a8abb2;
  background-color: #f5f7fa;
  cursor: not-allowed;
}

.el-dialog__footer {
  text-align: center;
}

.cell {
  padding: 3px 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

.cell .text {
  width: 24px;
  margin: 0 auto 4px;
}

.cell.current {
  background: #626aef;
  color: #fff;
  border-radius: 6px;

  .text {
    color: #fff
  }
}

.cell .holiday {
  position: absolute;
  width: 6px;
  height: 6px;
  background: var(--el-color-danger);
  border-radius: 50%;
  bottom: 0px;
  left: 50%;
  transform: translateX(-50%);
}

.cell span {
  line-height: 12px;
}

.box {
  display: flex;
  flex-direction: column;

  .calendarBox {
    width: 400px;
  }

  .times {
    display: flex;
    width: 400px;
    flex-wrap: wrap;
    padding: 0 7px;
    box-sizing: border-box;
    margin-top: 10px;

    .time_box {
      width: 20%;
      padding: 5px;
      box-sizing: border-box;
    }

    .time {
      width: 100%;
      box-sizing: border-box;
      height: 30px;
      line-height: 30px;
      text-align: center;
      font-size: 12px;
      border-radius: 6px;
      border: 1px solid #eee;
      cursor: pointer;

      &.active {
        color: #FFC200;
        border: 1px solid #FFC200;
        background: #FFF9E5;
      }
    }
  }
}

.caceder_icon {
  position: absolute;
  right: 10px;
  top: 5px;
  width: 18px;
  height: 18px;
  background: url('@/assets/image/cacel_icon.png') center center no-repeat;
  background-size: cover;
}
</style>
<style lang="scss">
.dialogT {
  .el-date-editor.el-input {
    width: 100%;
  }

  .el-calendar-table .el-calendar-day {
    height: 48px;
    text-align: center;
  }
}

.calendar {

  .el-dialog__body {
    padding: 0;
  }

  .el-calendar__body {
    padding: 12px;
    border-bottom: 1px solid #eee;
  }

  .el-calendar-day {
    padding: 0;
    font-size: 14px;
  }

  .el-calendar-table td {
    border: none !important;
  }
}

.el-calendar-table td.is-selected {
  background-color: #ffc200;
  border-radius: 6px;
  font-size: 14px;

  .point {
    display: block;
    width: 4px;
    height: 4px;
    background-color: #666;
    border-radius: 4px;
  }
}

.disabledDate {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: gray;
  height: 48px;
  font-size: 14px;
}

.dateItem {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 48px;
  color: #000
}

.point {
  display: block;
  width: 4px;
  height: 4px;
  background-color: #19BE6B;
  border-radius: 4px;
}
</style>